<template>
  <div>
    <!-- <list :list="list" :render="renderFunc"></list> -->
    <list :list="list" :style="{color:'blue',fontSize:'30px'}">
      <count-to slot-scope="count" :end-val="count.number"></count-to>
      <!-- slot-scope的值就代表了list.vue 中<slot :number="item.number"></slot> 所有的 :number等等的变量的对象 -->
    </list>
    
  </div>
</template>
<script>
import list from '_c/list'
import countTo from '_c/countTo'
export default {
  data(){
    return {
      list:[
        {name:"sjf"},
        {name:"lisi"},
        {name:'ww12345678'}
      ]
    }
  },
  components: {
    list,
    countTo
  },
  methods:{
    // renderFunc(h, name){
    //   let color = 'blue'
    //   if(name.length > 8) color= 'purple'
    //   return h('i',{
    //     style:{
    //       color: color
    //     }
    //   },name)
    // }

    // jsx 写法
       renderFunc(h, name){
         return (
          // <i on-click={this.say} style= {{color:'green'}}>{name}</i>
          // 调用组件 不需要在component中声明，引进来是叫啥名就写啥，变量用{}包裹
          <countTo endVal={100} on-sjf={this.eventEmit} nativeOn-click={this.comClick}></countTo>
         )
       },
       say(event){
         console.log(event)
       },
       eventEmit(){
         console.log("触发组件中emit传出来的事件")
       },
       comClick(){
         console.log('绑定在组件最外层div上的事件')
       }
  }
}
</script>

